<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>服务器信息</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.11/theme-chalk/index.css" rel="stylesheet">
    <style>
        .el-row {
            margin-bottom: 20px;
        }
        
        .el-row:last-child {
            margin-bottom: 0;
        }
        
        .sysFile {
            margin-bottom: 5px;
        }
        
        .sysFile:last-child {
            margin-bottom: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-button @click="_initSockJs" type="primary" :disabled="isConnected">手动连接</el-button>
            <el-button @click="_destroySockJs" type="danger" :disabled="!isConnected">断开连接</el-button>
            <el-button @click="_sendName" type="primary" :disabled="!isConnected">发送消息</el-button>
            <el-button @click="_clear" type="danger" >清除</el-button>
        </el-header>
        <el-main>
            <ul>
                用户token:<el-input v-model="token"></el-input>
            </ul>
            <ul>
                <li v-for="(item, index) in itemArr" :key="index">
                    <el-input v-model="item.content"></el-input>
                </li>
            </ul>
        </el-main>
    </el-container>
</div>
</body>
<script src="/js/sockjs.min.js"></script>
<script src="/js/stomp.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.11/index.js"></script>
<script>

  const app = new Vue({
    el: '#app',
    data: function () {
      return {
        isConnected: false,
        headers:null,
        stompClient: {},
        socket: {},
        token:null,
        itemArr: [{
          content: ''
        }],
      }
    },
    methods: {
      _initSockJs() {
        this.socket = new SockJS("http://127.0.0.1:20000/socket");
        this.stompClient = Stomp.over(this.socket);
        this.headers = {
          //token为登陆会话返回的token
          token: this.token
        };
        this.stompClient.connect(this.headers, (frame) => {
          this._addEle('websocket连接成功:' + frame);
          this.isConnected = true;
          this.$message('websocket服务器连接成功');
          //公共接收主题
          this.stompClient.subscribe("/topic/session", (response) => {
            this._addEle(response.body)
          });
          //定点接收信息订阅主题
          this.stompClient.subscribe("/user/topic/session", (response) => {
            this._addEle(response.body)
          });
        });
      },
      _destroySockJs() {
        if (this.stompClient != null) {
          this.stompClient.disconnect();
          this.socket.onclose;
          this.socket.close();
          this.stompClient = {};
          this.socket = {};
          this.isConnected = false;
        }
        this.$message.error('websocket断开成功！');
        this._addEle('websocket断开成功！')
      },
      _sendName() {
        this.stompClient.send("/receive", this.headers, JSON.stringify({'message':'客户端新消息111'}));
        this._addEle('客户端发送消息')
      },
      _addEle(text) {
        this.itemArr.push({
          content: text
        })
      },
      _clear(){
        this.itemArr=[];
      },
    },
    mounted() {
      // this._initSockJs();
    },
    beforeDestroy() {
      this._destroySockJs();
    }

  })
</script>
</html>